<template>
  {{msg}}
  <input type="text" v-model="msg">
</template>

<script lang="ts" setup>
import {
  computed,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
  watch
} from "vue";
const msg=ref("Hello")

onBeforeMount(()=>{
  console.log("onBeforeMount()...组件挂载页面之前执行")
})
onMounted(()=>{
  console.log("onMounted()...组件挂载页面之后执行")
})

onBeforeUpdate(()=>{
  console.log("onMounted()...组件更新之前执行")
})
onUpdated(()=>{
  console.log("onMounted()...组件更新之后执行")
})

onBeforeUnmount(()=>{
  console.log("onBeforeUnmount()...组件卸载之前执行")
})
onUnmounted(()=>{
  console.log("onUnmounted()...组件卸载之后执行")
})
</script>

<style scoped>

</style>

